<template>
<div class="Layout">
    <top-Box :isDefault="true"></top-Box>
    <div class="mainInfo">
        <template v-if="info">
            <up-title-box 
                :face="info.face"
                :top_photo="info.top_photo"
                :mid="info.mid"
                :name="info.name"
                :is_followed="info.is_followed"
                :sex="info.sex"
                :type="info.official.type"
                :level="info.level"
                :sign="info.sign"
                :isVip="info.vip.status"
                :vip_img="info.vip.label.img_label_uri_hans_static"
                :fans_medal="info.fans_medal"
            ></up-title-box>
            <tags-box :mid="props.mid"></tags-box>
            <router-view></router-view>
        </template>
    </div>
</div> 
</template>

<script lang="ts" setup>
import { get } from '@/http/axios'
import { onMounted,onBeforeMount,ref } from 'vue'
import { useStore } from 'vuex'
import { getWbiKeys,encWbi } from '@/api/getVideo'
import { topBox,upTitleBox,tagsBox } from './index'

interface Props{
    mid:string
}
const props = defineProps<Props>()
const store = useStore()
let info = ref()

onBeforeMount(() => {
    initData()
})

onMounted(() => {
    
    
})
function initData(){
   const wbi_keys = getWbiKeys(store)
   const query = encWbi(
    {
        mid:props.mid,
        token:'',
        platform:'web',
        web_location:'1550101'
   },
        wbi_keys.img_key, 
        wbi_keys.sub_key
   )
   get('/x/space/wbi/acc/info?' + query).then(res => {
        console.log('up主信息',res);
        info.value = res.data
        store.commit('setUpInfo', res.data)
   }).catch(res => {
    alert('up信息加载出错')
   })
}
</script>

<style lang="scss" scoped>
.Layout{
    position: absolute;
    width: 100%;
    min-width: 1200px;
    height: 100%;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    background-color: #f4f5f7;
}
.mainInfo{
    margin-top: 65px;
    width: 1300px;
    min-height: calc(100% - 300px);
}
</style>